$include("$theme/scrollable.css");



$.fn.verticalScrollable = function(p_css)
{    
    var $content = $(this);
    var $frame = $("<div class='scrollable verticalScrollable'/>");
    if (p_css == null)
    {
        p_css = { width: "100%", height: "100%" };
    }
    $frame.css(p_css);
    $content.replaceWith($frame);
    $frame.append($content);
    $content.addClass("scrollableContent");
    var $scrollbar = $("<div id='verticalScrollbar'><div id='thumb'/></div>");
    var $thumb = $scrollbar.children("#thumb");
    $frame.append($scrollbar);
    
    
    var context = {
        content: $content.get(0),
        frame: $frame.get(0),
        scrollbar: $scrollbar.get(0),
        thumb: $thumb.get(0)
    };
    
    
    setTimeout(function(){
        $content.updateScrollbars(context);
    }, 50);
    
    $content.scroll(function()
    {
        $(this).updateScrollbars(context);
    });
    
    
    
    
    
    
    
    
    
    
    $scrollbar.mouseover(function(e)
    {
        $content.updateScrollbars();
    });
    
    var _mouseDownY = 0;
    var _scrollTop = 0;
    $thumb.mousedown(function(e){
        _mouseDownY = e.screenY;
        _scrollTop = $content.scrollTop();
        $(document.body).userSelectable(false);
        $(document.body).mousemove(_thumb_mousemove);
        $(document.body).mouseup(_thumb_mouseup);
    });
    
    $scrollbar.click(function(e)
    {
        if (e.target.id == "thumb")
        {
            return;
        }
        var contentHeight = context.content.scrollHeight;
        $content.animate({
            scrollTop: (e.offsetY - $thumb.height() / 2) * contentHeight / $scrollbar.height()
        }, 300);
    });
    
    function _thumb_mousemove(e)
    {
        var delta = e.screenY - _mouseDownY;
        var contentHeight = context.content.scrollHeight;
        $content.scrollTop(_scrollTop + contentHeight / $scrollbar.height() * delta);
    }
    
    function _thumb_mouseup(e)
    {
        $(document.body).userSelectable(true);
        $(document.body).unbind("mousemove", _thumb_mousemove);
        $(document.body).unbind("mouseup", _thumb_mouseup);
    }
};




$.fn.updateScrollbars = function(context)
{
    if (context == null)
    {
        var $content = $(this);
        var $frame = $content.parent();
        if (!$frame.hasClass("verticalScrollable"))
        {
            return;
        }
        var $scrollbar = $content.children("#verticalScrollbar");
        $scrollbar = $frame.children("#verticalScrollbar");
        $thumb = $scrollbar.children("#thumb");
        
        context = {
            content: $content.get(0),
            frame: $frame.get(0),
            scrollbar: $scrollbar.get(0),
            thumb: $thumb.get(0)
        };
    }
    
    
    
    var content = context.content;
    var frame = context.frame;
    var scrollbar = context.scrollbar;
    var thumb = context.thumb;
    var $content = $(content);
    var $scrollbar = $(scrollbar);
    
    var timer = $content.data("fadeTimer");
    if (timer != null)
    {
        clearTimeout(timer);
        $content.data("fadeTimer", null);
    }
    
    var contentHeight = content.scrollHeight;
    var frameHeight = frame.offsetHeight;
    var thumbHeightPercent = frameHeight / contentHeight;
    var thumbTopPercent = content.scrollTop / contentHeight;
    
    if (thumbHeightPercent >= 1)
    {
        $scrollbar.fadeOut();
        return;
    }
    
    thumb.style.height = thumbHeightPercent * 100 + "%";
    thumb.style.top = thumbTopPercent * 100 + "%";
    $scrollbar.fadeTo("fast", 0.8);
    
    
    var timer = setTimeout(function() {
        var $scrollbar = $(scrollbar);
        $scrollbar.stop(true, false);
        $scrollbar.fadeTo("fast", 0.001);
    }, 1000);
    $content.data("fadeTimer", timer);
};